<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
/*             $('.list li').click(function () {

                $(this).css({
                    'background-color': 'red',
                });

            }); */

            //事件代理 事件委托
            $('.list').delegate('li', 'click', function(){
            $(this).css({
            'background-color':'red',
            });
            }); 

            //新建元素
            var $li = $('<li>9</li>');


            //把新建的元素放入子集的最后面
            $('.list').append($li);



        });
    </script>
    <style type="text/css">
        .list {
            background-color: gold;
            list-style: none;
        }

        .list li {
            height: 30px;
            background-color: green;
            margin: 10px;

        }
    </style>
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

</body>

</html>